<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/my-style.css">
    <link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>

</head>
<style>
    .layui-form-label {
        width: 86px;
        padding: 9px 9px;
    }

</style>

<body>
<div class="kit-doc">

    <!--表格搜索框组-->
    <div class="layui-form-item layui-formgroup layui-tab-card">
        <!-- input输入框 -->
        <div class="layui-inline">
            <label class="layui-form-label">项目名称：</label>
            <div class="layui-input-inline">
                <input name="phone" autocomplete="off"
                       class="layui-input" type="tel" id="projectName">
            </div>
        </div>

        <!-- input输入框 -->
        <div class="layui-inline">
            <label class="layui-form-label">项目编号：</label>
            <div class="layui-input-inline">
                <input name="phone" autocomplete="off"
                       class="layui-input" id="projectId">
            </div>
        </div>

        <!-- 按钮 -->
        <button class="layui-btn" id="searchBtn">搜索</button>
    </div>

    <div class="layui-card layui-card-body">
        <!-- 表格增删改查btn -->
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="modal1"><i class="fa fa-plus"></i>&nbsp;增加
            </button>
        </div>
        <table class="layui-table xuhao-table" id="table-context" lay-filter="test">
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </table>
    </div>


</div>
<!-- 弹框content -->
<div id="modal-content1" style="display: none; padding:20px;">
    <form class="layui-form" action="" id="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">项目编号
                <span style="color: #ff393c;">★</span>：
            </label>

            <div class="layui-input-block">
                <input type="text" name="projectId" required lay-verify="required"
                       placeholder="请输入项目编号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">项目名
                <span style="color: #ff393c;">★</span>：
            </label>
            <div class="layui-input-block">
                <input type="text" name="projectName" required lay-verify="required"
                       placeholder="请输入项目名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <input name="deptId" type="hidden" id="treeId"/>
            <label class="layui-form-label">选择部门
                <span style="color: #ff393c;">★</span>：
            </label>
            <div class="layui-input-block" style="height: 200px;overflow-y: scroll">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间
                <span style="color: #ff393c;">★</span>：
            </label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="startDate" name="startDate"
                       placeholder="yyyy-MM-dd" lay-verify="required">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间
                <span style="color: #ff393c;">★</span>：
            </label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="endDate" th:name="endDate"
                       placeholder="yyyy-MM-dd" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">启用/禁用：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" id="status" lay-skin="switch" lay-text="启用|禁用"
                       lay-filter="switchStatus">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" id="remark"
                          class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 70%;margin-top: 8%">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!--部门id转名字模板-->
<script type="text/html" id="deptTpl">
    {{ fn(d.deptId) }}
</script>

<!--状态模板-->
<script type="text/html" id="statusTpl">
    <input type="checkbox" name="sex" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用"
           readonly="readonly" disabled="disabled"
           lay-filter="status" {{ d.status== '0' ? 'checked' : '' }}>
</script>
<script type="text/javascript" src="../../static/js/jquery.min.js"
        th:src="@{/js/jquery.min.js}"></script>
<script src="/plugins/layui/layui.js"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    // 获取角色list
    var deptList = [[${deptList}]];
    // id 部门map
    var idDeptMap = new Map();
    for (var i = 0; i < deptList.length; i++) {
        idDeptMap.set(deptList[i].id, deptList[i].deptName);
    }
</script>
<script>
    // 部门id转名字
    var fn = function (deptIds) {
        var idList = deptIds.split(",");
        var str = "";
        for (var i = 0; i < idList.length; i++) {
            str += idDeptMap.get(idList[i]) + ",";
        }
        return str.substr(0, str.length - 1);
    };
</script>
<script src="/js/ry-ui.js"></script>
<script>
    /*用户管理-新增-选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = treeId == null || treeId == "" ? "100" : treeId;
        var url = "/system/dept/selectDeptTree/" + deptId;
        layer.open({
            title: "选择部门",
            type: 2,
            content: url,
            area: ['22%', '45%'],
            shadeClose: true
        });
    }
</script>

<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.$;
        var projectTable = table.render({
            elem: '#table-context'
            , url: '/project/list'
            , height: 'full-200'
            , page: true
            , limit: 10
            , limits: [10, 20, 30]
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , cols: [
                [
                    {field: 'projectId', title: '项目编号', width:'12%',align: 'left'},
                    {field: 'projectName', title: '项目名', align: 'left'},
                    {
                        field: 'deptName',
                        title: '部门名',
                        align: 'left',
                        templet: '#deptTpl'
                    }
                    , {field: 'startDate',width:'10%', title: '开始时间', align: 'center',sort: true}
                    , {field: 'endDate', width:'10%',title: '结束时间', align: 'center',sort: true},
                    {
                        field: 'status',width:'6%', title: '项目状态', align: 'center', templet: '#statusTpl'
                    }
                    , {fixed: 'right', width:'9%',title: "操作", align: 'center', toolbar: '#barDemo'}
                ]
            ],
            done: function (res, curr, count) {
            }
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确定删除当前项目？', function (index) {
                    console.log("当前行的数据为：" + data.id);
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    layui.$.ajax({
                        type: 'DELETE',
                        url: "/project/del/" + data.id,
                        success: function (res) {
                            layer.closeAll();
                            if (res.code == 0) {
                                layer.msg("删除成功");
                            } else {
                                layer.msg("删除失败" + data.msg);
                            }
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                // 编辑操作
                layui.layer.open({
                    title: "内容修改",
                    type: 2,
                    content: ["/project/update/" + data.id, 'no'],
                    area: ['40%', '88%'],
                    shadeClose: true
                });
            }
        });

        // 查询
        $("#searchBtn").click(function () {
            projectTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    projectName: $("#projectName").val(),
                    projectId: $("#projectId").val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
    });
</script>

<!--弹框-->
<script>
    var $ = layui.jquery,
        layer = layui.layer;

    $('#modal1').on('click', function () {
        layer.open({
            title: "内容添加",
            type: 1,
            content: $("#modal-content1"),
            area: ['40%', '88%'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#addForm").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });

                //以下代码实现重置树
                var treeObj = $.fn.zTree.getZTreeObj("tree");
                treeObj.checkAllNodes(false);
            }
        });
    });
</script>

<script>
    // 增加项目表单
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchStatus)', function (data) {
            this.value = this.checked ? "0" : "1";
        });

        var $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            data.field.status = data.field.status ? "0" : "1";
            var deptId = selectCheckeds();
            if(deptId==''||deptId==null||deptId==undefined){
                parent.layer.msg('请选择部门！');
                return false;
            }
            else{
                data.field.deptId = deptId;
                $.ajax({
                    type: 'POST',
                    url: "/project/add",
                    data: data.field,
                    async:true,
                    success: function (res) {
                        layer.closeAll();
                        if (res.code == 0) {
                            parent.layer.msg("增加成功");
                            window.location.reload();
                        } else {
                            parent.layer.msg("增加失败" + res.msg);
                            return false;
                        }
                    }
                });
            }
        });
    });
</script>

<script>
    // 树结构初始化加载
    var setting = {
        check: {enable: true, nocheckInherit: true, chkboxType: {"Y": "ps", "N": "ps"}},
        view: {selectedMulti: false}, data: {key: {title: "title"}, simpleData: {enable: true}},
        callback: {
            onClick: function (event, treeId, treeNode) {
                var treeId = treeNode.id;
                var treeName = treeNode.name;
                $("#treeId").val(treeId);
                $("#treeName").val(treeName);
            }
        }
    }, tree, loadTree = function () {
        $.get("/system/dept/treeData", function (data) {
            var treeName = $("#treeName").val();
            tree = $.fn.zTree.init($("#tree"), setting, data);
            // 展开第一级节点
            var nodes = tree.getNodesByParam("level", 0);
            for (var i = 0; i < nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
                selectCheckNode(treeName, nodes[i]);
            }
            // 展开第二级节点
            nodes = tree.getNodesByParam("level", 1);
            for (var i = 0; i < nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
                selectCheckNode(treeName, nodes[i]);
            }
            // 展开第二级节点
            nodes = tree.getNodesByParam("level", 2);
            for (var i = 0; i < nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
                selectCheckNode(treeName, nodes[i]);
            }
        }, null, null, "正在加载，请稍后...");
    };

    $(function () {
        loadTree();
    });

    function selectCheckeds() {
        var menuIds = "";
        var treeNodes = tree.getCheckedNodes(true);
        for (var i = 0; i < treeNodes.length; i++) {
            if (treeNodes[i].getCheckStatus().half != true) {
                if (menuIds == "") {
                    menuIds = treeNodes[i].id;
                } else {
                    menuIds += ("," + treeNodes[i].id);
                }
            }
        }
        return menuIds;
    }
    function selectCheckNode(treeName, node) {
        if (treeName == node.name) {
            tree.selectNode(node, true);
        }
    }

</script>
</body>
</html>